<template>
  <xy-page>
    <div class="playHorse">
      <el-form :model="form">
        <el-form-item label="是否使用默认:" :label-width="labwidth">
          <el-switch v-model="form.default" class="ft10" @change="defaultSwicth"></el-switch>
          <span v-if="form.default" style="color:#ccc;margin-left:10px;">直播过程中设置值，将以跑马灯的形式出现在直播画面中，目前仅支持PC端</span>
        </el-form-item>

        <el-form-item label="防录屏跑马灯:" :label-width="labwidth" v-if="!form.default">
          <el-switch v-model="form.value" class="ft10" @change="change" ></el-switch>
          
        </el-form-item>

        <div v-if="form.value && !form.default">
          <el-form-item label="跑马灯类型:" :label-width="labwidth">
            <el-radio-group v-model="form.radio">
              <el-radio label="fixed">固定值</el-radio>
              <el-radio label="nickname">登录用户名</el-radio>
              <el-radio label="diyurl">URL自定义设置</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="this.form.radio!='diyurl'">
            <el-form-item label="设置固定值:" :label-width="labwidth" v-if="this.form.radio=='fixed'">
              <el-input v-model="form.playContent" placeholder="请输入跑马灯内容" class="w300"></el-input>
            </el-form-item>
            <el-form-item label="字体大小:" :label-width="labwidth">
              <el-input v-model="form.size" class="w100" @change="changeSize"></el-input>
              <span class="mgl40">
                字体颜色:
                <el-color-picker v-model="form.color" class="mgl20"></el-color-picker>
              </span>
            </el-form-item>
            <el-form-item label="透明度:" :label-width="labwidth">
              <div class="block">
                <el-slider v-model="form.transparency" class="w300 fl" :show-tooltip="false"></el-slider>
                <span class="fl mgl10">{{form.transparency}}%</span>
              </div>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="设置自定义URL:" :label-width="labwidth">
              <div>
                <el-select v-model="setUrl" class="w100">
                  <el-option v-for="item in httpOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                </el-select>
                <el-input v-model="form.qturl" class="w200"></el-input>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="自定义缩放:" :label-width="labwidth">
            <el-switch v-model="form.zoom" class="ft10"></el-switch>
          </el-form-item>
          <el-form-item label :label-width="labwidth">
            <div v-if="this.form.radio!='diyurl'">
              <el-button type="primary" @click="savePlay">保存</el-button>
              <el-button @click="lookVideo">预览</el-button>
            </div>
            <div v-else>
              <el-button type="primary" @click="savePlay">确认保存</el-button>
            </div>
          </el-form-item>
          <el-dialog title="预览" :visible.sync="dialogPlay" v-if="dialogPlay" width="700px" :modal="false" :close-on-click-modal="false">
            <div class="mgt20" >
              <video :src="videoSrc" controls  width="100%" height="100%" style="border:1px solid #ccc" object-fit="fill" controlsList="nodownload" ref="video"></video>
              <marquee style="position: absolute;display: inline-block;width: 660px;overflow: hidden;top: 215px;color: #000; text-shadow:0px 1px 3px #fff;font-size: 30px;opacity:1" align=# ref="marquee">{{conText}}</marquee>
            </div>
            <span slot="footer" class="dialog-footer">
              <div style="text-align:center;margin-top:20px;padding-bottom:20px;">
                <el-button type="primary" @click="dialogPlay = false">关闭预览</el-button>
              </div>
            </span>
          </el-dialog>
        </div>
      </el-form>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      labwidth: '120px',
      setUrl:'http://',
      videoSrc:'',
      conText:'',
      shownum:[0],
      typeName:'',
      form: {
        value: false,
        default: false,
        zoom: false,
        radio: 'fixed',
        playContent: '',
        size: 30,
        color: 'colorpicker',
        transparency: 0,
        channelId:'',
        appId:'',
        qturl:''
      },
      dialogPlay:false,
      httpOptions: [{
        value: 'https://',
        label: 'https://'
      },{
        value: 'http://',
        label: 'http://'
      }],
    }
  },
  methods: {
    changeSize(){
      if(this.form.radio=='nickname'||this.form.radio=='fixed'){
        if(this.form.size<1){
          this.form.size=1
        }else if(this.form.size>256){
          this.form.size=256
        }
      }
    },
    lookVideo(){//观看预览
      this.dialogPlay = true
      this.videoSrc='http://plvod01.videocc.net/sl8da4jjbx/c/sl8da4jjbx0272e52e03be888a12c82c_1.mp4'
      if(this.form.radio=='nickname'){
        this.conText = '显示观看者的呢称'
      }else if(this.form.radio=='fixed'){
        this.conText = this.form.playContent
      }else{
        this.conText = this.setUrl+this.form.qturl
      }
      this.$nextTick(()=>{
        this.$refs.marquee.style.color = this.form.color
        this.$refs.marquee.style.fontSize = this.form.size+'px'
        this.$refs.marquee.style.opacity = (100-this.form.transparency)/ 100
        this.$refs.video.play()
      })
    },
    defaultSwicth(){
      if(this.form.default){
        // 请求接口, 默认设为true
        this.setDefault('Y', () => {
          this.$message.success('开启成功')
        })
      }else{
        this.setDefault('N', () => {
          this.$message.success('关闭成功')
          this.closeHorse()
        })
      }
    },
    change(){
      if(!this.form.value){
        this.closeHorse()
      }
    },
    // 关闭防录屏跑马灯
    closeHorse(){
      this.$postStream('/admin/instance/ccb/polyv/player/updateHorseLamp.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          marqueeRestrict: 'N',
          marqueeType: 'nickname',
          marqueeFontColor: '#000000',
          marqueeOpacity: '50',
          marqueeAutoZoomEnabled: 'N'
        },
        success: res=>{
          if(res.success){}
        }
      })
    },
    setDefault(enabled, cb){
      this.$postStream('/admin/instance/ccb/polyv/channel/enabled/update.do', {
        data: {
          appId: this.appId,
          channelId: this.channelId,
          enabled: enabled,
          globalEnabledType: 'marquee'
        },
        success: res => {
          if(res.success){
            cb && cb()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('操作失败')
            this.form.default = !this.form.default
          }
        },
        error: () => {
          res.code == 50001?this.$message.error(res.message):this.$message.error('操作失败')
          this.form.default = !this.form.default
        }
      })
    },
    getPlay() {//获取跑马灯
      this.$postStream('/admin/instance/ccb/polyv/player/getHorseLamp.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          getActual: 'N'
        },
        success: res=> {
          if(res.success){
            this.form.default = this.booleanChange(res.object.globalSettingEnabled)
            this.form.value = this.booleanChange(res.object.marqueeRestrict)
            this.form.radio = res.object.marqueeType||'fixed'
            if(res.object.marqueeType=='diyurl'){
              this.setUrl = res.object.marquee.split('://')[0]+'://'
              this.form.qturl = res.object.marquee.split('://')[1]
              this.form.playContent = ''
            }else if(res.object.marqueeType=='fixed'){
              this.form.playContent = res.object.marquee
              this.form.qturl = ''
            }
            this.form.size = res.object.marqueeFontSize||30
            this.form.color = res.object.marqueeFontColor||'#000000'
            this.form.transparency = 100-res.object.marqueeOpacity
            this.form.zoom = this.booleanChange(res.object.marqueeAutoZoomEnabled)
          }else{
            this.$message.error('获取跑马灯设置失败!')
          }
        }
      })
    },
    savePlay(){//设置跑马灯
      this.context=''
      if(this.form.radio=='fixed' && !this.form.playContent.trim()){
        this.$message.error('固定值不能为空')
        return
      }
      if(this.form.radio=='diyurl' && !this.form.qturl.trim()){
        this.$message.error('自定义url不能为空')
        return
      }
      if(this.form.radio=='diyurl'){
        this.context = this.setUrl+this.form.qturl
      }else{
        this.context = this.form.playContent
      }
      this.$postStream('/admin/instance/ccb/polyv/player/updateHorseLamp.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          marquee: this.context,
          marqueeAutoZoomEnabled: this.letterChange(this.form.zoom) || '',
          marqueeFontColor: this.form.color || '',
          marqueeFontSize: this.form.size||12,
          marqueeOpacity: 100-this.form.transparency || 0,
          marqueeRestrict: this.letterChange(this.form.value) || '',
          marqueeType: this.form.radio || ''
        },
        success:res=>{
          if(res.success){
            if(this.form.radio=='nickname'){
              this.typeName = '登录用户名'
            }else if(this.form.radio=='diyurl'){
              this.typeName = 'URL自定义设置'
            }else{
              this.typeName = '固定值'
            }
            this.$message.success(this.typeName+'设置成功!')
            this.getPlay()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error(this.typeName+'设置失败!')
          }
        }
      })
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId') || ''
    this.getPlay()
  }
}
</script>

<style lang="scss" scoped >
</style>


